<template>
    <CardBox class="body">
        <div class="selectionunit-box">
            <div class="unit" @click="openSelect">
                {{ currentRecap?.text }}
                <span class="icon iconfont icon-zhankai"></span>
                <!-- <img class="down-arrow" src="@/assets/img/down-arrow.png" /> -->
            </div>
            <div v-for="(item, index) in list" :key="index" class="info-item">
                <div class="value">
                    {{ item.value }}{{ item.unit }}
                </div>
                <div class="label">
                    {{ item.label }}
                </div>
            </div>
        </div>
    </CardBox>
    <Picker title="选择楼栋" :is-show="showPicker" :columns="columns" @close="showPicker = false" @confirm="onConfirm"></Picker>
</template>

<script lang="ts"  setup>
import { ref, watch } from 'vue';
import CardBox from './components/CardBox.vue';
import { RecapInfo } from './onePage.module';
import { onMounted, PropType } from 'vue';
import Picker from '@/components/DurationSelecter/index.vue';

const props = defineProps({
    unitList: {
        type: Array as PropType<RecapInfo[]>,
        require: true,
        default: ()=>[],
    },
});

const showPicker = ref(false);
const currentRecap = ref<{text: string;value: string;}>();
const columns = ref<{text: string;value: string;}[]>([]);
const list = ref<{label: string;value: number;unit: string;}[]>();

const openSelect = () => {
    showPicker.value = true;
};

const handleUnitRecapInfo = ()=>{
    const obj = props.unitList?.find(item => item.id === currentRecap.value?.value);
    if(obj){
        list.value = [
            {
                label: '电梯数',
                value: obj.elevatorNum,
                unit: '个'
            },
            {
                label: '楼层',
                value: obj.floors,
                unit: '层'
            },
            {
                label: '覆盖家庭',
                value: obj.households,
                unit: '户'
            },
        ];
    }
};

const onConfirm = (e:{text: string;value: string;}) => {
    showPicker.value = false;
    currentRecap.value = e;
    handleUnitRecapInfo();
};

const initData = ()=>{
    if(!props.unitList || !props.unitList.length){
        return;
    }

    columns.value = props.unitList.map((item: RecapInfo)=>{
        return {
            text: item.name,
            value: item.id,
        };
    });
    currentRecap.value = columns.value[0];
    handleUnitRecapInfo();
};

watch(
    () => props.unitList,
    () => {
        initData();
    },{
        deep: true
    }
);

onMounted(()=>{
    initData();
});
</script>

<style lang="scss" scoped>
.body {
    padding-top: 0;

    :deep(.content) {
        padding: 6px 13px;
    }
}

.selectionunit-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .info-item {
        // margin-left: 30px;

        .value {
            font-family: PingFangSC-SNaNpxibold, sans-serif;
            font-weight: 600;
            font-size: 14px;
            color: #333333;
        }

        .label {
            font-family: PingFangSC-Regular, sans-serif;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            margin-top: 2px;
        }
    }
}

.confirm {
    font-family: PingFangSC-Regular, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
}

.down-arrow {
    width: 9.94px;
    height: 12.11px;
    margin-left: 10px;
}

.icon-zhankai {
    font-size: 10px;
    color: #d8d8d8;
    margin-left: 10px;
}

.unit {
    font-family: PingFangSC-Medium, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #e60044;
    display: flex;
    align-items: center;
}
</style>
